<template>
  <BorderBox11 :title="props.title">
    <div class="top5">
      <div class="sale">
        <ul>
          <li>
            <div class="showImg">
              <img src="@/assets/images/blue.png" alt="">
            </div>
            <div class="data">
              <span style="margin-right: 15px">{{ $t('ems.powerOn') }}</span>
              <span>{{ props.statusData.PowerOnCount }}</span>
            </div>
            <v-chart class="shoeChart" ref="bluechart" :option="blueOptions"></v-chart>
          </li>
          <li>
            <div class="showImg">
              <img src="@/assets/images/green.png" alt="">
            </div>
            <div class="data">
              <span style="margin-right: 15px">{{ $t('ems.production') }}</span>
              <span>{{ props.statusData.InProductionCount }}</span>
            </div>
            <v-chart class="clothesChart" ref="greenchart" :option="greenOptions"></v-chart>
          </li>
          <li>
            <div class="showImg">
              <img src="@/assets/images/orange.png" alt="">
            </div>
            <div class="data">
              <span style="margin-right: 15px">{{ $t('ems.shutDown') }}</span>
              <span>{{ props.statusData.ShutDownCount }}</span>
            </div>
            <v-chart class="mzChart" ref="orangechart" :option="orangeOptions"></v-chart>
          </li>
          <li>
            <div class="showImg">
              <img src="@/assets/images/red.png" alt="">
            </div>
            <div class="data">
              <span style="margin-right: 17px">{{ $t('ems.breakdown') }}</span>
              <span>{{ props.statusData.BreakDownCount }}</span>
            </div>
            <v-chart class="redChart" ref="redchart" :option="redOptions"></v-chart>
          </li>
          <li>
            <div class="showImg">
              <img src="@/assets/images/green2.png" alt="">
            </div>
            <div class="data">
              <span style="margin-right: 15px">{{ $t('ems.operation') }}</span>
              <span>{{ props.statusData.RunningCount }}</span>
            </div>
            <v-chart class="greenChart" ref="greenschart" :option="greensOptions"></v-chart>
          </li>
        </ul>
      </div>
    </div>
  </BorderBox11>
</template>

<script setup>
import { defineProps, onMounted, ref, watch } from 'vue'
import { BorderBox11 } from 'datav-vue3'
import useI18n from '@/hooks/language'

const { t } = useI18n()

const props = defineProps({
  title: { type: String },
  statusData: {
    type: Object
  }
})
watch(() => [props.title, props.statusData], () => {
  // console.log(props.title)
  bluechart.value.setOption(barsOptions('', Number(props.statusData.PowerOnCount), t('ems.powerRatios'), Number(props.statusData.TotalNumberofDevices), '#09c4ca'))
  greenchart.value.setOption(barsOptions('', Number(props.statusData.InProductionCount), t('ems.produceRatios'), Number(props.statusData.TotalNumberofDevices), '#09c4ca'))
  orangechart.value.setOption(barsOptions('', Number(props.statusData.ShutDownCount), t('ems.haltRatios'), Number(props.statusData.TotalNumberofDevices), '#09c4ca'))
  redchart.value.setOption(barsOptions('', Number(props.statusData.BreakDownCount), t('ems.faultRatios'), Number(props.statusData.TotalNumberofDevices), '#09c4ca'))
  greenschart.value.setOption(barsOptions('', Number(props.statusData.RunningCount), t('mes.runRatios'), Number(props.statusData.TotalNumberofDevices), '#09c4ca'))
})

const bluechart = ref(null)
const blueOptions = ref(null)

const greenchart = ref(null)
const greenOptions = ref(null)

const orangechart = ref(null)
const orangeOptions = ref(null)

const redchart = ref(null)
const redOptions = ref(null)

const greenschart = ref(null)
const greensOptions = ref(null)

onMounted(() => {

})
const barsOptions = (ele, val, con, max, color) => {
  var value = val
  return {
    grid: {
      left: '30%',
      top: '0',
      right: '10%',
      bottom: '0'
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [{
      type: 'category',
      inverse: false,
      data: [],
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    }],
    series: [
      {
        type: 'pictorialBar',
        data: [value],
        itemStyle: {
          normal: {
            color: color
          }
        },
        symbolRepeat: 'fixed',
        symbolClip: true,
        symbolSize: [0.5 * 18, 18],
        symbol: 'roundRect',
        label: {
          show: true,
          position: 'left',
          formatter: function () {
            return con
          },
          color: '#fff',
          fontSize: 0.7 * 18
        },
        z: 1000
      },
      {
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#193040'
          }
        },
        data: [max],
        animationDuration: 0,
        symbolRepeat: 'fixed',
        // symbolMargin: '20%',
        symbol: 'roundRect',
        symbolSize: [0.5 * 18, 18],
        label: {
          show: true,
          position: 'right',
          formatter: function () {
            return (val * 100 / max).toFixed(0) + '%'
          },
          color: '#fff',
          fontSize: 0.7 * 18
        }
      }
    ]
  }
}

</script>

<style scoped lang="scss">
.top5 {
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.top5 .top5-title-th {
  width: 100%;
  background: url('@/assets/images/title.png') no-repeat center;
  background-size: 100%;
  color: #fff;
  text-align: center;
  display: table;
  font-size: 20px;
}

.top5 .top5-title-th span {
  display: table-cell;
  vertical-align: middle;
}

.top5 .sale {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 25px;

  ul {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 4% 0 0 0;

    li {
      width: 100%;
      height: 18%;
      margin-top: 1%;

      .showImg {
        float: left;
        width: 10%;
        height: 100%;
        text-align: center;
        animation: rotate 5s infinite linear;

        img {
          vertical-align: 0%;
          width: 70%;
          margin-top: 30%;
        }
      }

      .data {
        float: left;
        width: 10%;
        height: 100%;
        text-align: center;

        span {
          color: #fff;
          font-size: 14px;
        }

        span:nth-of-type(2) {
          color: #0ac1c7;
        }
      }

      .shoeChart,
      .clothesChart,
      .mzChart,
      .redChart,
      .greenChart {
        height: 100%;
        width: 75%;
        float: left;
      }
    }
  }
}

</style>
